<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>分页页码制作</title>
    <style type="text/css">
        body,div {
            margin: 0;
            padding: 0;
        }
        .page-icon {
            margin-top: 20px;
            text-align: center;
            font-size: 0;/*修复行内元素之间空隙间隔*/
        }
        .page-icon a ,.page-disabled,.page-current{
            margin-right: 10px;
            padding: 4px 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
            text-decoration: none;
            font-size: 14px;
            color: #005aa0;
        }
        a:hover{
            text-decoration: underline;
        }
        .page-current {
            color: #ff6600;
        }
        span.page-disabled{
            padding-left: 2px;
            color: #ccc;
        }
        a.page-next{
            padding-right: 2px;
        }
        .page-disabled span,.page-next span {
            display: inline-block;
            border-width: 5px 10px;
            border-style:  solid;
            border-color: transparent;
            font-size: 0;/*ie7*/
        }
        .page-disabled span {
            border-right-color: #ccc;
            margin-right: 10px;
        }
        .page-next span {
            border-left-color: #ff6600;
            margin-left: 10px;
        }
        .ellipsis{
            font-size: 14px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <!--行内元素中间有间隙-->
    <!--产生原因：换行符、制表符、空格产生空隙-->
    <!--解决方法：1、元素写成一行（代码混乱）；2、设置font-size:0-->
    <div class="page-icon">
        <span class="page-disabled"><span></span>上一页</span>
        <span class="page-current">1</span>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <span class="ellipsis">...</span>
        <a href="#">199</a>
        <a href="#">200</a>
        <a class="page-next" href="#">下一页<span></span></a>
    </div>
</body>
</html>